<template>
  <el-tree-select
    v-model="treeId"
    :empty-values="emptyValues"
    :props="defaultProps"
    :data="props.data ? props.data : tree"
    :disabled="disabled"
    :show-checkbox="showCheckbox"
    check-strictly
    default-expand-all
    clearable
    :style="{ width: selectWidth }"
  />
</template>
<script lang="ts" setup>
/*
 *下拉树形菜单
 */
// import TreeSelect from '@/components/TreeSelect.vue';
import { ref, onMounted } from 'vue';
import Request from '@/api/request/request';
import type { TreeData, TreeProps } from '@/types/interface/base_interface';
// 获取父组件传递过来的值，主要用于部门模块
// const table = inject<TableData>('table'); // 表格信息
// 获取父组件传递过来的值
interface Props {
  url?: string; //服务端接口地址。和data一般是二选一，即如果是父组件已经传入了data则不不在从服务端读取数据
  data?: TreeData[]; //传入的数据。和url一般是二选一
  disabled?: boolean; // 可用性
  showCheckbox?: boolean; // 是否显示复选框
  selectWidth?: string; //下拉框宽度
  emptyValues?: Array<any>; //下拉框默认为空的值，如果有其他值需要自己单独传入
  defaultProps?: TreeProps; //自定义树形内容。如果与默认值不同，需要传入自己实际的树形内容对应属性
  modelType?: string; //绑定v-model的数据类型
}
const props = withDefaults(defineProps<Props>(), {
  disabled: false,
  showCheckbox: false,
  selectWidth: '240px',
  modelType: 'number',
  emptyValues: () => ['', undefined, null], //下拉框默认为空的值，如果有其他值需要自己单独传入
  defaultProps: () => {
    return {
      // 菜单显示标签对应的属性名
      value: 'id',
      label: 'name',
      children: 'children'
    };
  }
});
//select在v-model绑定的值。同时绑定number和string，会在父组件报错，但是可以正常运行。不确认是否是插件问题，暂时注释
// const treeId = defineModel<number | string>({
//   required: false,
//   default: 0
// });
const treeId = defineModel<number>({
  required: false,
  default: 0
});

// 从服务端获取树形菜单数据
const tree = ref<TreeData[]>(); // 定义树形菜单
//如果传递了地址进来则从地址获取
if (typeof props.url !== 'undefined' && props.url.length > 0) {
  // 读取树形菜单
  const resData: any = await new Request(props.url).get();
  if (resData.success) {
    tree.value = resData.data;
  }
}

//vue3.4后使用defineModel可以实现v-mode双向绑定，故此取消双向监听。
// const treeId = computed({
//   get() {
//     // 不能在get里面改变nodeName.value的值，所以在watch里面进行修改
//     // nodeName.value=treeRef.value.getNode(props.modelValue).data["name"];
//     return props.modelValue;
//   },
//   set(val) {
//     emit('update:modelValue', val); // 则传递给父组件
//   }
// });
</script>
